<!-- <template>
export default {
	components: {
		vvSelect
	},
	data() {
		return {
			hello: '',
			can_submit: true,
			image_url_before: '',
			imgListBefore: [],
			imgListAfter: [],
			imgListBeforeBackup: [],
			imgListBeforeBackups: [],

			imgListAfterBackup: [],
			imgListAfterBackups: [],
			image_url_after: '',
			yinhuan_type: '自主整改',
			yinhuan_type_categories: [],
			yinhuan_level: '自主级别',
			yinhuan_level_categories: [],
			yinhuan_dept_id: '',
			yinhuan_type_id: '',
			yinhuan_level_id: '',
			yinhuan_description: '',
			yinhuan_state_id: '',
			yinhuan_status_categories: [
				{
					label: '未整改',
					value: 1
				},
				{
					label: '已整改',
					value: 2
				}
			]
		};
	},
	methods: {
		ViewImage(e) {
			let _this = this;
			uni.previewImage({
				urls: _this.imgListBefore,
				current: e.currentTarget.dataset.url
			});
		},
		ViewImage2(e) {
			let _this = this;
			uni.previewImage({
				urls: _this.imgListAfter,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			let _this = this;
			uni.showModal({
				title: '确定删除',
				content: '确定要删除这张图片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						_this.imgListBefore.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		DelImg2(e) {
			let _this = this;
			uni.showModal({
				title: '确定删除',
				content: '确定要删除这张图片吗？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						_this.imgListAfter.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		onLoad: function() {},
		bindPickerChangeYinhuanType(value) {
			this.yinhuan_type_id = value;
		},
		bindPickerChangeYinhuanLevel(value) {
			this.yinhuan_level_id = value;
		},
		bindPickerChangeYinhuanStatus(value) {
			this.yinhuan_state_id = value;
		},
		verify_param(param, err = '不能为空') {
			if (param == 0 || param == '') {
				uni.showToast({
					title: err
				});
				return false;
			}
		},
		submit_yinhuan() {
			let _this = this;
			if (_this.yinhuan_type_id == 0 || _this.yinhuan_type_id == '') {
				uni.showToast({
					title: '隐患类型不能为空'
				});
				return false;
			}
			if (_this.yinhuan_level_id == 0 || _this.yinhuan_level_id == '') {
				uni.showToast({
					title: '隐患等级不能为空'
				});
				return false;
			}
			if (_this.yinhuan_state_id == 0 || _this.yinhuan_state_id == '') {
				uni.showToast({
					title: '隐患状态不能为空'
				});
				return false;
			}
			if (_this.yinhuan_description == 0 || _this.yinhuan_description == '') {
				uni.showToast({
					title: '隐患描述不能为空'
				});
				return false;
			}
			if (_this.imgListBefore.length <= 0) {
				uni.showToast({
					title: '隐患前图片不能为空'
				});
				return false;
			}
			if (_this.yinhuan_state_id == 2) {
				console.log(_this.imgListAfter.length);
				if (_this.imgListAfter.length == 0 || _this.imgListAfter == '') {
					uni.showToast({
						title: '隐患后图片不能为空'
					});
					return false;
				}
			}
			if (_this.can_submit) {
				_this.can_submit = false;
				this.$api
					.yh_save({
						yhlx: _this.yinhuan_type_id,
						yhdj: _this.yinhuan_level_id,
						yhms: _this.yinhuan_description,
						yhfj: _this.hello,
						clzt: _this.yinhuan_state_id - 1,
						clfj: _this.imgListAfter[0]
					})
					.then(res => {
						console.log(res);
						let code = res.data.code;
						if (code === 200) {
							uni.showToast({
								title: '提交成功'
							});
							uni.switchTab({
								url: './index'
							});
						}
						_this.can_submit = true;
					});
			}
		},
		onShow: function() {
			let is_login = uni.getStorageSync('user_token') ? true : false;

			if (!is_login) {
				uni.navigateTo({
					url: '../profile/user_login'
				});
			}

			let _this = this;
			this.$api.hk_yhxx_yflx({}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					let obj = res.data.data[i];
					let dictLabel = obj['dictLabel']; // 名称
					let dictValue = obj['dictValue']; //  ID
					let data = {
						label: dictLabel,
						value: dictValue
					};
					_this.yinhuan_type_categories.push(data);
				}
				_this.danger = res.data.data;
			});

			this.$api.getYhdjMapList({}).then(res => {
				for (let i = 0; i < res.data.data.length; i++) {
					let obj = res.data.data[i];
					let dictLabel = obj['dictLabel']; // 名称
					let val = obj['val']; //  ID
					let data = {
						label: dictLabel,
						value: val
					};
					_this.yinhuan_level_categories.push(data);
				}
				_this.bindPickerChangeYinhuanLevel(3);
				_this.danger = res.data.data;
			});
		},

		ChooseImage(index) {
			let _self = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['copressed'],
				success(res) {
					//因为有一张图片， 输出下标[0]， 直接输出地址
					var imgFiles = res.tempFilePaths[0];
					console.log(imgFiles);
					let token = uni.getStorageSync('user_token');
					let header = {
						Authorization: token,
						// 'Content-Type': "multipart/form-data; ",
						Accept: 'application/json,text/plain,*/*'
					};
					var imgFiless = res.tempFilePath
					console.log(imgFiless)
					var uper = uni.uploadFile({
						url: config + '/common/upload',
						header: header,
						filePath: imgFiless,
						name: 'file',
						success(res) {	
							console.log(res,'1111111111111')
							let json = JSON.parse(res.data);
							let url = json.fileName;
							if (index == 0) {
								_self.imgListBefore.push(url);
								_self.hello = _self.imgListBefore.join(',');
								_self.imgListBeforeBackup.push(config + url);
								console.log(_self.hello);
							} else {
								_self.imgListAfter.push(url);
								_self.imgListAfterBackup = [config + url];
							}
						}
					});
					
					// uni.compressImage({
					// 	src:imgFiles,
					// 	quality: 50,
					// 	success: res => {
						
					// 	}
				// 	});
				

					// onProgressUpdate 上传对象更新的方法
					// uper.onProgressUpdate(function(res) {
					// 	// 进度条等于 上传到的进度
					// 	_self.percent = res.progress;
					// 	console.log('上传进度' + res.progress);
					// 	console.log('已经上传的数据长度' + res.totalBytesSent);
					// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
					// });
				}
			});
		}
	}
};
</script> -->



 
 <template>
 	<view id="tmpl">
 		<view class="line-text">
 			<text>隐患类型:</text>
 			<vvSelect v-model="yinhuan_type" :list="yinhuan_type_categories" @change="bindPickerChangeYinhuanType" valueKey="value"
 			 label="label"></vvSelect>
 		</view>
 
 		<view class="line-text">
 			<text>隐患级别:</text>
 			<vvSelect v-model="yinhuan_level" placeholder="三级" :list="yinhuan_level_categories" @change="bindPickerChangeYinhuanLevel" valueKey="value"
 			 label="label"></vvSelect>
 		</view>
 
 		<view class="line-text">
 			<text>隐患状态:</text>
 			<vvSelect v-model="yinhuan_state_id" :list="yinhuan_status_categories" @change="bindPickerChangeYinhuanStatus"
 			 valueKey="value" label="label"></vvSelect>
 		</view>
 
 		<view class="line-textarea">
 			<text>隐患描述:</text>
 			<textarea placeholder="请填写隐患描述" v-model="yinhuan_description"></textarea>
 		</view>
 
 		<view class="line-image">
 			<text style="padding-bottom: 20upx;">隐患前图片:</text>
 			<view>
 				<view class="grid col-4 grid-square flex-sub">
 					<view class="bg-img" v-for="(item,index) in imgListBeforeBackup" :key="index" @tap="ViewImage" :data-url="imgListBeforeBackup[index]">
 						<image :src="imgListBeforeBackup[index]" mode="aspectFill"></image>
 						<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
 							<text class='cuIcon-close'></text>
 						</view>
 					</view>
 					<view class="solids" @tap="ChooseImage(0)" v-if="imgListBeforeBackup.length<6">
 						<text class='cuIcon-cameraadd'></text>
 					</view>
 				</view>
 			</view>
 		</view>
 
 		<view class="line-image" v-show="yinhuan_state_id == 2">
 			<text style="padding-bottom: 20upx;">隐患后图片:</text>
 			<view>
 				<view class="grid col-4 grid-square flex-sub">
 					<view class="bg-img" v-for="(item,index) in imgListAfterBackup" :key="index" @tap="ViewImage2" :data-url="imgListAfterBackup[index]">
 						<image :src="imgListAfterBackup[index]" mode="aspectFill"></image>
 						<view class="cu-tag bg-red" @tap.stop="DelImg2" :data-index="index">
 							<text class='cuIcon-close'></text>
 						</view>
 					</view>
 					<view class="solids" @tap="ChooseImage(1)" v-if="imgListAfterBackup.length<1">
 						<text class='cuIcon-cameraadd'></text>
 					</view>
 				</view>
 			</view>
 		</view>
 
 		<view class="padding flex flex-direction">
 			<button class="cu-btn bg-blue margin-tb-sm lg" @click="submit_yinhuan">提交</button>
 		</view>
 	</view>
 </template>
 
 <script>
 	import vvSelect from '../../components/vv-select/vv-select.vue';
 	import config from "../../static/common/config.js"
 	export default {
 		components: {
 			vvSelect
 		},
 		data() {
 			return {
 				hello:'',
 				can_submit: true,
 				image_url_before: '',
 				imgListBefore: [],
 				imgListAfter: [],
 				imgListBeforeBackup: [],
 				imgListAfterBackup: [],
 				image_url_after: '',
 				yinhuan_type: '自主整改',
 				yinhuan_type_categories: [],
 				yinhuan_level: '自主级别',
 				yinhuan_level_categories: [],
 				yinhuan_dept_id:'',
 				yinhuan_type_id: '',
 				yinhuan_level_id: '',
 				yinhuan_description: '',
 				yinhuan_state_id: '',
 				yinhuan_status_categories: [{
 						label: '未整改',
 						value: 1
 					},
 					{
 						label: '已整改',
 						value: 2
 					}
 				]
 			};
 		},
 		methods: {
 			ViewImage(e) {
 				let _this = this
 				uni.previewImage({
 					urls: _this.imgListBefore,
 					current: e.currentTarget.dataset.url
 				});
 			},
 			ViewImage2(e) {
 				let _this = this
 				uni.previewImage({
 					urls: _this.imgListAfter,
 					current: e.currentTarget.dataset.url
 				});
 			},
 			DelImg(e) {
 				let _this = this
 				uni.showModal({
 					title: '确定删除',
 					content: '确定要删除这张图片吗？',
 					cancelText: '取消',
 					confirmText: '确定',
 					success: res => {
 						if (res.confirm) {
 							_this.imgListBefore.splice(e.currentTarget.dataset.index, 1)
 						}
 					}
 				})
 			},
 			DelImg2(e) {
 				let _this = this
 				uni.showModal({
 					title: '确定删除',
 					content: '确定要删除这张图片吗？',
 					cancelText: '取消',
 					confirmText: '确定',
 					success: res => {
 						if (res.confirm) {
 							_this.imgListAfter.splice(e.currentTarget.dataset.index, 1)
 						}
 					}
 				})
 			},
 			onLoad: function() {},
 			bindPickerChangeYinhuanType(value) {
 				this.yinhuan_type_id = value;
 			},
 			bindPickerChangeYinhuanLevel(value) {
 				this.yinhuan_level_id = value;
 			},
 			bindPickerChangeYinhuanStatus(value) {
 				this.yinhuan_state_id = value;
 			},
 			verify_param(param, err = '不能为空') {
 				if (param == 0 || param == '') {
 					uni.showToast({
 						title: err
 					});
 					return false;
 				}
 			},
 			submit_yinhuan() {
 				let _this = this;
 				if (_this.yinhuan_type_id == 0 || _this.yinhuan_type_id == '') {
 					uni.showToast({
 						title: '隐患类型不能为空'
 					});
 					return false;
 				}
 				if (_this.yinhuan_level_id == 0 || _this.yinhuan_level_id == '') {
 					uni.showToast({
 						title: '隐患等级不能为空'
 					});
 					return false;
 				}
 				if (_this.yinhuan_state_id == 0 || _this.yinhuan_state_id == '') {
 					uni.showToast({
 						title: '隐患状态不能为空'
 					});
 					return false;
 				}
 				if (_this.yinhuan_description == 0 || _this.yinhuan_description == '') {
 					uni.showToast({
 						title: '隐患描述不能为空'
 					});
 					return false;
 				}
 				if (_this.imgListBefore.length <= 0) {
 					uni.showToast({
 						title: '隐患前图片不能为空'
 					});
 					return false;
 				}
 				if (_this.yinhuan_state_id == 2) {
 					console.log(_this.imgListAfter.length)
 					if (_this.imgListAfter.length == 0 || _this.imgListAfter == '') {
 						uni.showToast({
 							title: '隐患后图片不能为空'
 						});
 						return false;
 					}
 				}
 				if (_this.can_submit) {
 					_this.can_submit = false;
 					this.$api
 						.yh_save({
 							yhlx: _this.yinhuan_type_id,
 							yhdj: _this.yinhuan_level_id,
 							yhms: _this.yinhuan_description,
 							yhfj: _this.hello,
 							clzt: _this.yinhuan_state_id - 1,
 							clfj:_this.imgListAfter[0]
 							
 						})
 						.then(res => {
 							console.log(res);
 							let code = res.data.code;
 							if (code === 200) {
 								uni.showToast({
 									title: '提交成功'
 								});
 								uni.switchTab({
 									url: './index'
 								});
 							}
 							_this.can_submit = true;
 						});
 				}
 			},
 			onShow: function() {
 				let is_login = uni.getStorageSync('user_token') ? true : false;
 
 				if (!is_login) {
 					uni.navigateTo({
 						url: '../profile/user_login'
 					})
 				}
 				
 				let _this = this;
 				this.$api.hk_yhxx_yflx({}).then(res => {
 					for (let i = 0; i < res.data.data.length; i++) {
 						let obj = res.data.data[i];
 						let dictLabel = obj['dictLabel']; // 名称
 						let dictValue = obj['dictValue']; //  ID
 						let data = {
 							label: dictLabel,
 							value: dictValue
 						};
 						_this.yinhuan_type_categories.push(data);
 					}
 					_this.danger = res.data.data;
 				});
 				
 				this.$api.getYhdjMapList({}).then(res => {
 					for (let i = 0; i < res.data.data.length; i++) {
 						let obj = res.data.data[i];
 						let dictLabel = obj['dictLabel']; // 名称
 						let val = obj['val']; //  ID
 						let data = {
 							label: dictLabel,
 							value: val
 						};
 						_this.yinhuan_level_categories.push(data);
 					}
 					_this.bindPickerChangeYinhuanLevel(3)
 					_this.danger = res.data.data;
 				});
 			},
			
			//用的这个方法
			// uni.compressImage({
			// 	src:imgFiles,
			// 	quality: 50,
			// 	success: res => {
			// 		}
			// 		}
			
 			ChooseImage(index) {
 				let _self = this;
 				uni.chooseImage({
 					count: 1,
 					sizeType: ['copressed'],
 					success(res) {
						console.log("res",res)
 						//因为有一张图片， 输出下标[0]， 直接输出地址
 						var imgFiles = res.tempFiles[0];
 						console.log('imgFiles',imgFiles)
 						let token = uni.getStorageSync('user_token');
 						let header = {
 							Authorization: token,
 							"Content-Type": "multipart/form-data",
 							Accept: 'application/json,text/plain,*/*'
 						};
 						var uper = uni.uploadFile({
 							url: config + '/common/upload',
 							header: header,
 							filePath: imgFiles,
 							name: 'file',
 							success(res) {
 								console.log(res)
 								console.log(imgFiles)
 								let json = JSON.parse(res.data);
 								let url = json.fileName;
 							
 								if (index == 0) {
 									_self.imgListBefore.push(url) 
 									_self.hello=_self.imgListBefore.join(",")
 								
 									_self.imgListBeforeBackup.push(config+url)
 									
 								} else {
 									_self.imgListAfter.push(url) 
 									
 									_self.imgListAfterBackup = [config+url]
 								};
 							}
 						});
 						// onProgressUpdate 上传对象更新的方法
 						// uper.onProgressUpdate(function(res) {
 						// 	// 进度条等于 上传到的进度
 						// 	_self.percent = res.progress;
 						// 	console.log('上传进度' + res.progress);
 						// 	console.log('已经上传的数据长度' + res.totalBytesSent);
 						// 	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
 						// });
 					}
 				});
 			}
 		}
 	};
 </script>
 
 <style lang="scss" >
 	page {
 		background-color: #fff;
 		padding-bottom: 20px;
 	}
 
 	.line-text,
 	.line-textarea,
 	.line-image {
 		margin: 20upx;
 		@extend .flex-between;
 		border-bottom: solid 1px rgba(0, 0, 0, 0.3);
 		padding: 0 10upx;
 	}
 
 	.line-textarea,
 	.line-image {
 		display: block;
 	}
 
 	.line-textarea {
 		border-bottom: none;
 
 		text {
 			display: block;
 			padding-bottom: 15upx;
 		}
 
 		textarea {
 			margin-top: 10upx;
 			padding: 0;
 			width: calc(100%);
 			font-size: $uni-font-size-base;
 			color: $font-color-4;
 			border: solid 1px rgba(0, 0, 0, 0.3) !important;
 			padding: 20upx;
 		}
 	}
 
 	.line-text {
 		height: 68upx;
 		line-height: 68upx;
 		padding-bottom: 20upx;
 	}
 
 	.line-image {
 		border-bottom: solid 1px rgba(0, 0, 0, 0.3);
 
 		text {
 			display: block;
 		}
 
 		padding: 15upx 0;
 	}
 
 	.line-button {
 		@extend .line-button;
 		margin-top: 20px;
 	}
 </style>